<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-20 15:20:52
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-12-03 18:22:32
-->
<template>
    <div class="main-content-right">
        <div class="headerBox">
            <div class="title">通知列表</div>

            <div>
                <el-select
                    v-model="value"
                    placeholder="请选择通知类型"
                    @change="changType"
                    size="small"
                    style="width:180px;margin-right:30px"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-button
                    type="text"
                    style="margin-right:10px"
                    @click="flagData(true)"
                    >清除未读</el-button
                >
                <el-button
                    type="text"
                    style="margin-right:10px"
                    @click="removeInform(true)"
                    >清空</el-button
                >
            </div>
        </div>

        <div class="bodyBox">
            <div v-for="(el, index) in listData" :key="index">
                <div
                    class="cardItemBox"
                    :class="{
                        isRead: el.push_state == '1'
                    }"
                    @click="toDeital(el, index)"
                >
                    <div class="cardItemBox-left">
                        <div style="width: 180px;">
                            <div
                                class="cardItemBox-title"
                                style="margin-bottom: 8px;"
                            >
                                {{ el.creat_time | getTime }}
                            </div>
                            <div>{{ el.subject_name }}</div>
                        </div>
                        <div class="cardItemBox-title" style="width: 80px;">
                            <!-- {{ el.nicheng }} -->
                        </div>
                        <div style="width: 320px;">
                            <div
                                class="cardItemBox-title textShenLue"
                                style="margin-bottom: 8px;"
                            >
                                {{ el.push_text }}
                            </div>
                            <div
                                class="textShenLue"
                                v-html="HTMLDecode(el.push_content)"
                            ></div>
                        </div>
                    </div>
                    <div
                        class="cardItemBox-right"
                        @click.stop="
                            removeInform(false, el.notice_push_id, index)
                        "
                    >
                        删除
                    </div>
                </div>
                <el-divider></el-divider>
            </div>
            <!-- //分页 -->
            <div class="bottomPagination">
                <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 30, 50]"
                    :page-size="pagesize"
                    layout=" sizes, prev, pager, next,total, jumper"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                />
            </div>
        </div>
    </div>
</template>

<script>
import {
    getNoticeLists,
    delNoticeLists,
    saveNoticeRead
} from "@/api/noticeLists/noticeLists";
import { getFormatTime } from "@/utils/timeUtils";
export default {
    data() {
        return {
            options: [
                {
                    value: "0",
                    label: "全部"
                },
                {
                    value: "1",
                    label: "同步"
                },
                {
                    value: "2",
                    label: "趣练"
                },
                {
                    value: "3",
                    label: "自评"
                },
                {
                    value: "4",
                    label: "测验"
                },
                {
                    value: "5",
                    label: "智测"
                },
                {
                    value: "6",
                    label: "自测"
                },
                {
                    value: "7",
                    label: "班级"
                },
                {
                    value: "8",
                    label: "名课"
                },
                {
                    value: "9",
                    label: "班家通"
                },
                {
                    value: "10",
                    label: "随堂练习"
                },
                {
                    value: "11",
                    label: "课前作业"
                },
                {
                    value: "12",
                    label: "课后作业"
                },
                {
                    value: "13",
                    label: "课前预习"
                },
                {
                    value: "14",
                    label: "老师群发通知"
                }
            ],
            value: "0", //选择通知类型
            page: 1,
            pagesize: 10,
            total: 0,
            listData: []
        };
    },
    created() {
        this.getList();
    },
    filters: {
        //时间格式
        getTime(val) {
            if (val != "") {
                return getFormatTime(val * 1000);
            }
        }
    },
    methods: {
        async getList() {
            var query = {
                page: this.page,
                pagesize: this.pagesize
            };
            if (this.value != "0") {
                query.push_type = this.value;
            }
            var list = await getNoticeLists(query);
            if (list.code == 200) {
                this.total = list.data.total;
                this.listData = list.data.data;
            } else {
                this.total = 0;
                this.listData = [];
                this.$message.error(list.msg);
            }
            console.log("首页通知列表：", list);
        },
        changType() {
            this.page = 1;
            this.getList();
        },

        //删除通知
        removeInform(clearAll, notice_push_id, index) {
            let msg = "确定清空所有消息？";
            if (!clearAll) {
                msg = "确定删除该条消息？";
            }
            this.$confirm(msg, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    var query = {
                        notice_push_ids: clearAll
                            ? this.getAllNoticeID()
                            : notice_push_id
                    };
                    var list = await delNoticeLists(query);
                    console.log(msg, list);
                    if (list.code == 200) {
                        if (clearAll) {
                            this.listData = [];
                        } else {
                            this.listData.splice(index, 1);
                        }
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "删除成功!"
                        });
                        this.changType();
                    }
                })
                .catch(() => {});
        },
        //标记已读
        async flagData(clearAll, notice_push_id, index) {
            var query = {
                notice_push_ids: clearAll
                    ? this.getAllNoticeID()
                    : notice_push_id
            };
            var list = await saveNoticeRead(query);
            if (list.code == 200) {
                if (clearAll) {
                    this.listData.forEach((el, i) => {
                        this.listData[i].push_state = 1;
                    });
                } else {
                    this.listData[index].push_state = 1;
                }
            }
        },
        getAllNoticeID() {
            var arr = [];
            this.listData.forEach(el => {
                arr.push(el.notice_push_id);
            });
            return arr.join(",");
        },
        //跳转处理,未完成
        toDeital(el, index) {
            console.log("跳转处理，未完成：", el, index);
            this.flagData(false, el.notice_push_id, index);
            //判断是否跳转
            var push_type = el.push_type;
            if (
                push_type == 4 ||
                push_type == 10 ||
                push_type == 11 ||
                push_type == 12 ||
                push_type == 13
            ) {
                var URL = "";
                var query = {};
                if (push_type == 4) {
                    //测验
                    URL = "/test/classTest/index";
                    query = {
                        groupid: el.groupid,
                        type: 0
                    };
                } else if (push_type == 10) {
                    // 随堂练习
                    URL = "/work/classWork/index";
                    query = {
                        groupid: el.groupid,
                        type: 2
                    };
                } else if (push_type == 11) {
                    //课前作业
                    URL = "/work/classWork/index";
                    query = {
                        groupid: el.groupid,
                        type: 1
                    };
                } else if (push_type == 12) {
                    // 课后作业
                    URL = "/work/classWork/index";
                    query = {
                        groupid: el.groupid,
                        type: 3
                    };
                } else if (push_type == 13) {
                    // 课前预习
                    URL = "/work/classWork/index";
                    query = {
                        groupid: el.groupid,
                        type: 4
                    };
                }
                this.$router.push({
                    path: URL,
                    query
                });
            }
        },
        //html标签被转义处理
        HTMLDecode(text) {
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getList();
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pagesize = val;
            this.getList();
        }
    }
};
</script>

<style scoped lang="scss">
.main-content-right {
    width: 98%;
    margin-left: 2%;
    min-height: 764px;
    min-width: 860px;
    padding: 24px;
    background: #fff;
    box-sizing: border-box;

    .headerBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
            font-size: 20px;
            font-weight: 600;
            color: #6b6a6a;
        }
    }

    .bodyBox {
        margin-top: 40px;
    }
}

.cardItemBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.cardItemBox-title {
    color: #2c323f;
    font-weight: 600;
}

.textShenLue {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.cardItemBox-left {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #9fa3b0;
}

.cardItemBox-right {
    width: 57px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 14px;
    background-color: #018854;
    color: #ffffff;
    cursor: pointer;
}

// 已读
.isRead {
    opacity: 0.5;
    color: #cccc;
}
</style>
